<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" />
      <p>维修项目</p>
      <span @click="$.router.push('repairProjectAdd')">添加</span>
    </div>
    <div class="repairProject-box">
      <table class="repairProject">
        <tr>
          <th>项目名称</th>
          <th>参考价格</th>
          <th class="textRight">操作</th>
        </tr>
        <tr v-for="item in ['1','2','3']">
          <td>电瓶维修</td>
          <td>￥20</td>
          <td class="textRight">
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
  export default{
    data(){
      return{}
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#FFFFFF')
    }
  }
</script>
<style>
.repairProject-box{
  padding: 0 0.4rem;
  margin-top: 0.4rem;
}
.repairProject{
  width: 100%;
}
.repairProject th{
  height: 0.88rem;
  background-color: #EEEEEE;
  padding: 0 0.26rem;
  color: #333333;
  font-size: 0.32rem;
  text-align: left;
}
.repairProject td{
  height: 1.33rem;
  border-bottom: 1px solid #EEEEEE;
  padding: 0 0.26rem;
  text-align: left;
  color: #333333;
  font-size: 0.32rem;
}
.repairProject td button{
  background-color: #FF7D7A;
  color: #FFFFFF;
  font-size: 0.32rem;
  border-radius: 0.32rem;
  width: 1.46rem;
  height: 0.64rem;
  line-height: 0.64rem;
}
.repairProject .textRight{
  text-align: right;
}
</style>
